<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 标准视框viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    position: absolute;
    transition:all 0.3333s;
    visibility: hidden;
    opacity: 0;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
     opacity: 1;
     z-index: 1;
}
    </style>
</head>
<body>
    <div class="dropdown">
        <button >下拉菜单</button>
        <div class="dropdown-content">
          <a href="#">菜鸟教程 1</a>
          <a href="#">菜鸟教程 2</a>
          <a href="#">菜鸟教程 3</a>
        </div>
      </div>
      <br>
      <div class="dropdown">
        <button >下拉菜单</button>
        <div class="dropdown-content">
          <a href="#">菜鸟教程 1</a>
          <a href="#">菜鸟教程 2</a>
          <a href="#">菜鸟教程 3</a>
        </div>
      </div>
      <br>
      <br>
      <br>
      <div class="dropdown">
        <button >下拉菜单</button>
        <div class="dropdown-content">
          <a href="#">菜鸟教程 1</a>
          <a href="#">菜鸟教程 2</a>
          <a href="#">菜鸟教程 3</a>
        </div>
      </div>
</body>
</html>